<template>
  <div class="main-wrap">
    <div id="main" class="inner">
      <div id="container">
        <div class="chat-container page-container">
          <div class="chat-wrap">
            <div class="list-warp">
              <div class="chat-user">
                <div class="boss-search-top">
                  <div class="boss-search-container">
                    <div class="icon-search">
                      <i class="iboss-sousuoicon"></i>
                    </div>
                    <input type="text" placeholder="搜索30天内的联系人" class="boss-search-input" />
                  </div>
                  <!---->
                </div>
                <div class="label-list">
                  <ul>
                    <li
                      v-for="(item, index) in labelList"
                      :key="index"
                      :class="{ selected: i === index }"
                      @click="changeSelected(index, item.itemName)"
                    >
                      <span>{{ item.label }}</span
                      ><!---->
                    </li>
                  </ul>
                </div>
                <div class="chat-content">
                  <div class="user-list">
                    <chatItem
                      v-for="chatItem in chatList"
                      :key="chatItem.id"
                      :chatItem="chatItem"
                      :active="chatItem.id === id"
                      @click="getMessageList(basicInfo.uuid, chatItem.id)"
                    ></chatItem>
                  </div>
                </div>
              </div>
              <!---->
            </div>
            <div class="chat-conversation" v-if="messageList">
              <div class="header">
                <div class="user-info">
                  <p class="base-info fl">
                    <span class="name"> 朱由检 </span
                    ><span> 石油开采有限公司 </span
                    ><!----><i class="vline"></i><span class="base-title"> 负责人 </span
                    ><!---->
                  </p>
                  <div class="fr right-content">
                    <a href="javascript:" class="btn-v2 btn-light-v2 op-settop tooltip tooltip-top"
                      >置顶</a
                    >
                  </div>
                </div>
                <div class="chat-position-content">
                  <div class="main">
                    <a href="javascript:;" ka="geek_chat_job_detail" class="position-content"
                      ><span class="position-name">{{ data[0].positionName }}</span
                      ><span class="salary" style="">{{ data[0].salary }}</span
                      ><span class="city">{{ data[0].city }}</span></a
                    >
                  </div>
                  <!----><!---->
                </div>
              </div>
              <ul class="chat-center-message__content" ref="recordList">
                <li v-for="messageItem in messageList" :key="messageItem.id">
                  <messageItem
                    :messageItem="messageItem"
                    :username="username"
                    :signType="signType"
                  ></messageItem>
                </li>
              </ul>
              <messageControl
                :dialogueInfo="dialogueInfo"
                :boss="false"
                @scrollToBottom="scrollToBottom"
              ></messageControl>
            </div>
            <!---->
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<!-- -------------------------------------------- -->
<script setup lang="ts">
import { useRoute } from 'vue-router'
import { useWebSocketStore } from '@/store/modules/webSocket'
import messageItem from '@/components/chat/messageItem.vue'
import messageControl from '@/components/chat/messageControl.vue'
import chatItem from '@/components/chat/chatItem.vue'
import { toRefs } from 'vue'
import { useUserStore } from '@/store/modules/user'
const webSocketStore = useWebSocketStore()
const userStore = useUserStore()
const { basicInfo } = toRefs(userStore.user)
// 获取路由跳转对象
const route = useRoute()
const item = route.query.item
const { messageList } = toRefs(webSocketStore)
const { signType } = toRefs(userStore)
const i = ref(0)
const username = ref(basicInfo.value.name)
const dialogueInfo = ref(null)
const chatList = ref([])
const id = ref(-1)
const recordList = ref(null)
const bascBossUrl = 'http://localhost:8080/api/images/companyLogo/'
const bascGeekUrl = 'http://localhost:8080/api/images/userProfile/'
const labelList = ref([
  { label: '全部', itemName: 'all' },
  { label: '新招呼', itemName: 'greeting' },
  { label: '仅沟通', itemName: 'communicate' },
  { label: '有面试', itemName: 'interview' }
])
console.log('user', userStore.user)
webSocketStore.getChatRecord().then((res) => {
  let { code, data, msg } = res.data
  console.log(msg)
  if (code !== 200) {
    console.log(msg)
    return
  }
  console.log('data', data)
  webSocketStore.messageLists = data
  console.log('xxxxxxxx', webSocketStore.messageList)
  // 封装chatList消息对象
  data.forEach((item, index) => {
    let list = {
      avatar: bascBossUrl + 'hwj.jpg',
      name: '朱由检',
      message: item.messages.slice(-1)[0].message,
      time: item.messages.slice(-1)[0].createTime,
      id: index
    }
    console.log(list)
    chatList.value.push(list)
  })
})
// 后端请求数据
const data = [
  {
    id: 1,
    imgUrl:
      'https://img.bosszhipin.com/beijin/upload/avatar/20230812/607f1f3d68754fd0b12b6bcdec2a25dcb163e708d79de589249f99c7dcd9b7b26ddf073d33b57240_s.jpg.webp',
    name: '刘颖慧',
    company: '新化县东方城市广...',
    posts: '经理',
    message: '好的',
    time: '昨天 14:50',
    messageList: [
      {
        myself: true,
        message:
          '您好，我是湖南中医药大学本科生，可以和您进一步沟通线上文员，后台登记，轻松7K+职位吗？',
        time: '02-23 13:54'
      },
      {
        myself: false,
        message: '主管已招满',
        time: '02-23 14:36'
      },
      {
        myself: true,
        message: '好的',
        time: '02-23 14:50'
      }
    ],
    positionName: '主管',
    salary: '4-5K',
    city: '娄底',
    communicate: true,
    greeting: false,
    interview: true
  },
  {
    id: 2,
    imgUrl:
      'https://img.bosszhipin.com/beijin/upload/avatar/20231221/607f1f3d68754fd013dfbd2f66a103254ee0b00f327f4f4bda8c11f382932e1227184ba81cd8b2cd_s.jpg.webp',
    name: '王女士',
    company: '泰盈科技集团',
    posts: '人事',
    message: '简历诊断提醒',
    time: '昨天 15:22',
    messageList: [
      {
        myself: true,
        message:
          '您好，我是湖南中医药大学本科生，可以和您进一步沟通线上文员，后台登记，轻松7K+职位吗？',
        time: '昨天 16:28'
      },
      {
        myself: false,
        message: '不好意思只接受24届',
        time: '昨天 16:36'
      },
      {
        myself: true,
        message: '谢谢',
        time: '昨天 16:50'
      }
    ],
    positionName: '线上文员，后台登记，轻松7K+',
    salary: '4-8K',
    city: '广州',
    communicate: false,
    greeting: true,
    interview: false
  },
  {
    id: 3,
    imgUrl:
      'https://img.bosszhipin.com/beijin/upload/avatar/20220905/607f1f3d68754fd040d2f6e45f37615564bfdc680566594c04883d13ee5309b484692acbd9ca44ad_s.png?x-oss-process=image/resize,l_900,h_600/format,webp',
    name: '金婧',
    company: '书亦烧仙草',
    posts: '招聘者',
    message: '您好，我是湖南中医药大学本科生，可以和您进一步沟通奶茶店店员职位吗？',
    time: '昨天 16:55',
    messageList: [
      {
        myself: true,
        message:
          '您好，我是湖南中医药大学本科生，可以和您进一步沟通线上文员，后台登记，轻松7K+职位吗？',
        time: '昨天 16:55'
      }
    ],
    positionName: '书亦烧仙草招聘奶茶店店员',
    salary: '2-4K',
    city: '娄底',
    communicate: true,
    greeting: false,
    interview: false
  }
]
const itemList = ref(data)

if (item !== undefined) {
  let value = JSON.parse(item)
  itemList.value.unshift(value)
}

function changeSelected(index, itemName) {
  i.value = index
  if (itemName === 'all') {
    itemList.value = data
  } else {
    itemList.value = data.filter((item) => item[itemName])
  }
}

const getMessageList = (uuid: string, inputId: number) => {
  changeId(inputId)
  webSocketStore.messageList = webSocketStore.messageLists[inputId].messages
  // 封装dialogueInfo消息对象
  dialogueInfo.value = {
    username: basicInfo.value.name,
    tousername: '黄文杰',
    userProfile: basicInfo.value.profile,
    touserProfile: 'hwj.jpg',
    type: '私发',
    userUuid: basicInfo.value.uuid,
    touserUuid: '79a4de92-486b-43ed-a915-1d26403c2525',
    chatgroupId: messageList.value[0].id
  }
  console.log('dialogueInfo', dialogueInfo.value)
  nextTick(() => {
    scrollToBottom()
  })
}
const changeId = (inputId: number) => {
  id.value = inputId
}
// 发送消息之后默认滚到底部
const scrollToBottom = () => {
  recordList.value.scrollTop = recordList.value.scrollHeight
}

async function getGeek() {
  await webSocketStore.createWebSocket(basicInfo.value.name).catch((err) => {
    console.log(err)
  })
}
getGeek()
</script>

<!-- ------------------------------------------------ -->

<style>
.main-wrap {
  background: var(--childThemeColor);
}

#main {
  min-height: calc(100vh - 300px);
}

.inner {
  width: 1184px;
  margin: 0 auto;
}

.page-container {
  max-width: 1184px;
  min-height: calc(100vh - 49px);
  margin: 0 auto;
}

.chat-wrap {
  position: absolute;
  top: 20px;
  bottom: 20px;
  margin: 0 auto;
  display: flex;
}
.list-warp {
  position: relative;
  overflow: hidden;
  height: 95%;
  width: 360px;
  border-radius: 12px;
  margin-top: 50px;
}

.chat-user {
  box-sizing: border-box;
  width: 360px;
  height: 100%;
  background-color: #fff;
  border-radius: 12px;
  display: flex;
  flex-direction: column;
}

.boss-search-top {
  width: 90%;
  height: 48px;
  background: linear-gradient(90deg, #f5fcfc, #fcfbfa);
  border-radius: 12px 12px 0 0;
  padding: 0 20px;
}

.boss-search-top .boss-search-container {
  position: relative;
  height: 100%;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.boss-search-top .boss-search-container .icon-search {
  position: absolute;
  right: 10px;
  display: flex;
  align-items: center;
  height: 28px;
  font-size: 16px;
}

.boss-search-top .boss-search-container .icon-search .iboss-sousuoicon {
  font-size: 14px;
  color: #9fa3b0;
}

.iboss,
[class*=' iboss-'],
[class^='iboss-'] {
  font-family: iboss !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.iboss-sousuoicon::before {
  content: '\e693';
  font-family: 'iconfont';
}

.boss-search-top .boss-search-container .boss-search-input {
  width: 100%;
  height: 30px;
  background: #fff;
  border-radius: 4px;
  border: 1px solid #e0e0e0;
  padding: 0 12px;
  font-size: 13px;
  line-height: 30px;
}

.label-list {
  padding: 10px 20px;
}

.label-list ul {
  display: flex;
  justify-content: space-between;
}

.label-list ul li.selected {
  background: rgba(0, 190, 189, 0.1);
}
.label-list ul li {
  cursor: pointer;
  display: inline-block;
  padding: 4px 8px;
  background: #f8f8f8;
  border-radius: 4px;
  position: relative;
}
.label-list ul li.selected span {
  color: #00a6a7;
}
.label-list ul li span {
  font-size: 13px;
  font-weight: 400;
  color: #333;
  line-height: 18px;
}
.chat-user .chat-content {
  position: relative;
  min-height: 0;
  flex: 1;
}
.user-list {
  position: relative;
  height: 100%;
}

.no-data {
  height: 100%;
  width: 100%;
  position: relative;
  background-color: #fff;
  display: flex;
  margin-top: -28px;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.no-data .empty-icon {
  width: 200px;
  height: 122px;
  background: url(https://static.zhipin.com/fe-zhipin-geek/web/chat/v5126/static/images/icon-on-data.002a9733.png)
    no-repeat;
  background-size: contain;
}
.no-data .no-setting-text {
  margin: 30px 0;
  line-height: 20px;
  font-size: 13px;
  font-weight: 400;
  color: #666;
  line-height: 18px;
}

.chat-conversation {
  position: relative;
  box-sizing: border-box;
  height: 95%;
  margin-left: 4px;
  background-color: #fff;
  width: 820px;
  border-radius: 16px;
  display: flex;
  flex-direction: column;
  margin-top: 50px;
  background: url('../../../assets/icons/背景.png');
}

.chat-no-data {
  position: relative;
  height: 100%;
  text-align: center;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.user-list .user-list-content {
  overflow-y: auto;
  height: 100%;
  padding: 6px 0;
}

.user-list li {
  height: 78px;
}

.user-list li .friend-content.selected {
  background-color: #f2f2f2;
}

.user-list li .friend-content {
  position: relative;
  display: block;
  padding: 14px 12px;
  cursor: pointer;
  margin: 0 8px;
  border-radius: 4px;
}

.user-list .figure {
  position: relative;
  float: left;
  width: 46px;
}

.user-list .figure img {
  display: block;
  width: 46px;
  height: 46px;
  border-radius: 100%;
}

.user-list .text {
  margin-left: 58px;
  font-size: 14px;
  color: #414a60;
}

.user-list .text .time {
  font-size: 13px;
  float: right;
  color: #b3b3b3;
}

.gray,
.time {
  color: #9fa3b0;
}

.user-list .text .title-box {
  font-size: 13px;
  font-weight: 400;
  color: #333;
  line-height: 16px;
  display: flex;
}

.user-list .text .title-box .name-box {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  display: inline-block;
}

.user-list .text .title-box .name-text {
  font-size: 15px;
  font-weight: 500;
  color: #222;
  margin-right: 10px;
}

.vline {
  width: 1px;
  height: 12px;
  vertical-align: middle;
  background: #e0e0e0;
  margin: 0 10px;
}

.vdot,
.vline {
  display: inline-block;
}

.chat-user .user-list li .vline {
  margin: 0 6px;
}

.user-list .text .title-box .vline {
  margin: 0 4px;
}

.user-list .text .last-msg {
  margin-top: 9px;
  font-size: 12px;
  line-height: 18px;
  color: #999;
  display: flex;
  align-items: center;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  position: relative;
}

.user-list .text .last-msg .last-msg-text {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  font-size: 13px;
  padding-right: 30px;
}

.user-list .text .user-operation {
  display: none;
  font-size: 12px;
  height: 18px;
  position: absolute;
  right: 0;
  top: 0;
  height: 20px;
}

.user-list .text .user-operation .icon-operate {
  width: 18px;
  height: 18px;
}

.user-list .text .user-operation .list-operate-hover,
.user-list .text .user-operation:hover .list-operate {
  display: none;
}

.user-list .text .user-operation .icon-operate {
  width: 18px;
  height: 18px;
}

.fl {
  float: left;
}

.fr {
  float: right;
}

.btn-v2.btn-sure-v2 {
  padding: 0 20px;
  background: #00bebd;
  border-color: #00bebd;
  font-size: 14px;
  font-weight: 400;
  color: #fff;
}

.btn-v2:last-child {
  margin-right: 0;
}

.btn-v2 {
  display: inline-block;
  padding: 0 20px;
  border-radius: 4px;
  transition: none;
  border: 1px solid #5dd5c8;
  background-color: #62d5c8;
  color: #fff;
  font-size: 14px;
  line-height: 26px;
  vertical-align: middle;
  cursor: pointer;
  margin-right: 10px;
  transition: all 0.3s;
}

.btn-v2 img {
  width: 16px;
  height: 16px;
  vertical-align: text-top;
}

.btn-v2.btn-light-v2 {
  padding: 0 20px;
  background: rgba(0, 190, 189, 0.1);
  border-color: transparent;
  font-size: 14px;
  font-weight: 400;
  color: #00a6a7;
}

.guide-download-app-chat-qrcode-v62 {
  display: none;
  position: fixed;
  top: 122px;
  left: 112px;
  z-index: 9999;
  padding: 14px;
  width: 160px;
  height: 205px;
  background: #fff;
  box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.08);
  border: 1px solid #ededed;
  border-radius: 10px;
}

.guide-download-app-chat-qrcode-v62 .app-icon-arrow {
  position: absolute;
  top: -5px;
  left: 76px;
  width: 8px;
  height: 8px;
  border: 1px solid #e3e7ed;
  border-top: none;
  border-right: none;
  transform: rotate(135deg);
  background: #fff;
}

.guide-download-app-chat-qrcode-v62 .app-icon-v62 {
  width: 130px;
  height: 130px;
  background: url(https://static.zhipin.com/fe-zhipin-geek/web/chat/v5139/static/images/download-app-v63.f7677295.png)
    no-repeat;
  background-size: 100% 100%;
}

.guide-download-app-chat-qrcode-v62 .text {
  font-size: 14px;
  font-weight: 500;
  color: #00a6a7;
  line-height: 20px;
  width: 100%;
  display: inline-block;
  margin-top: 3px;
  text-align: center;
}

.tip div {
  display: inline-block;
}

.chat-tips {
  line-height: 2.5;
  position: absolute;
  top: 100%;
  left: 0;
  display: none;
  width: 100%;
  animation: chatTipsFadeIn 0.3s both;
  text-align: center;
  color: #fff;
  background: rgba(255, 0, 0, 0.5);
}
.chat-conversation .header {
  display: flex;
  flex-direction: column;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  justify-content: start;
  background-color: #fff;
  font-size: var(--font-16);
  padding: 12px 24px;
  border-radius: 0 12px 0 0;
}
.online {
  display: flex;
  font-size: var(--font-12);
  align-items: center;
}
.online i {
  display: inline-block;
  width: 10px;
  height: 10px;
  background-color: #13ce66;
  border-radius: 50%;
  margin-right: 5px;
}

.chat-center-message__content {
  height: 90%;
  overflow-y: auto;
  padding: 80px 0 160px 0;
}
</style>
